<script setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
import { logoutApi } from '@/services/login/login'

const memberStore = useMemberStore()
const loading = ref(false)

const loginOut = () => {
  uni.showModal({
    content: '是否退出登录?',
    success: async (res) => {
      if (res.confirm) {
        logoutApi().then((res) => {
          if (res.status === 200) {
            // 清理用户信息
            memberStore.clearProfile()
            memberStore.clearUserInfo()
            // 返回登录页
            uni.navigateTo({ url: '/pages/login/login' })
            uni.showToast({
              title: '已退出登录',
              icon: 'success',
            })
          } else {
            uni.showToast({
              title: res.message,
              icon: 'error',
            })
          }
        })
      }
    },
  })
}
</script>

<template>
  <view class="settings">
    <button class="button" :loading="loading" hover-class="button-hover" @click="loginOut">
      退出
    </button>
  </view>
</template>

<style scoped>
.settings {
  padding: 30rpx;
}
.button {
  width: 100%;
  color: #fff;
  border-radius: 50rpx;
  background-color: #e2470b;
  margin-top: 30rpx;
}
</style>
